<template>
	<view class="container">
		<!-- 左侧房间类型菜单栏 -->
		<view class="menu">
			<view 
				v-for="(type, index) in roomTypes" 
				:key="index" 
				class="menu-item" 
				:class="{ 'active': selectedRoomType === type }"
				@click="selectRoomType(type)"
			>
				{{ type }}
			</view>
		</view>
		
		<!-- 右侧内容区域 -->
		<view class="content">
			<!-- 固定的房间配置展示框 -->
			<view class="room-config">
				<!-- <view class="title">宿舍信息</view> -->
				<view class="room-layout">房间布局</view>
				<swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" circular="true">
					<swiper-item v-for="(item, index) in imgList" :key="index">
						<image :src="item" class="slide-image" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<view style="font-size: 25rpx;"><span style="font-weight: 600;font-size: 30rpx;">房间面积-{{ furnitureData.area }}m²：</span> {{ furnitureData.refrigerator }}个冰箱、{{ furnitureData.airConditioner }}台空调、{{ furnitureData.washingMachine }}部洗衣机</view>
			</view>

			<!-- 房间列表 -->
			<view class="room-list">
				<view v-if="loading" class="loading">加载中...</view>
				<view v-else>
					<view v-if="allRooms.length === 0" class="no-data">暂无数据</view>
					<view v-else>
						<view 
							v-for="(room, index) in allRooms" 
							:key="index" 
							class="room-item"
							@click="selectRoom(room)"
						>
							<view class="room-name">房间号：{{ room.SS_MC }}</view>
							<view class="room-price">￥{{ room.number }}</view>
						</view>
						<view v-if="noMoreData" class="no-more-data">没有更多数据了</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { ajax } from '../../utils/request';

	export default {
		data() {
			return {
				roomTypes: ['单间', '双人间', '一房一厅', '二房一厅', '三房一厅'], // 房间类别
				selectedRoomType: '单间', // 默认选择的房间类别
				allRooms: [], // 所有房间数据
				loading: true, // 数据加载状态
				currentPage: 1, // 当前页码
				pageSize: 10, // 每页加载的数据量
				noMoreData: false, // 是否没有更多数据
				// 静态房间配置信息
				furnitureData: {
					refrigerator: '1',
					airConditioner: '1',
					washingMachine: '1',
					area: '15',
				},
				imgList: [
					'https://i1.hdslb.com/bfs/archive/bde803ce2a07296fce116898ee6889081dd9b0a3.jpg',
					'https://i1.hdslb.com/bfs/archive/bde803ce2a07296fce116898ee6889081dd9b0a3.jpg',
					'https://i1.hdslb.com/bfs/archive/bde803ce2a07296fce116898ee6889081dd9b0a3.jpg',
				],
			};
		},
		onLoad() {
			this.fetchBindInfo(); // 获取房间信息
			// 监听页面滚动事件
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0,
			});
			uni.onWindowScroll((res) => {
				const scrollTop = res.scrollTop;
				const windowHeight = uni.getSystemInfoSync().windowHeight;
				const scrollHeight = uni.getSystemInfoSync().windowHeight;
				if (scrollTop + windowHeight >= scrollHeight - 50 && !this.loading && !this.noMoreData) {
					this.currentPage += 1;
					this.fetchBindInfo();
				}
			});
		},
		methods: {
			// 获取房间信息
			async fetchBindInfo() {
				try {
					this.loading = true;
					const res = await ajax('/api/meter/bindinfo', 'POST', {
						page: this.currentPage,
						pageSize: this.pageSize,
					});
					if (res.success) {
						const newRooms = res.data.rooms || [];
						if (newRooms.length > 0) {
							this.allRooms = [...this.allRooms, ...newRooms];
						} else {
							this.noMoreData = true; // 没有更多数据了
						}
					} else {
						uni.showToast({
							title: '获取房间信息失败',
							icon: 'none',
						});
					}
				} catch (error) {
					console.error('获取房间信息失败:', error);
					uni.showToast({
						title: '网络异常，请稍后再试',
						icon: 'none',
					});
				} finally {
					this.loading = false;
				}
			},
			// 选择房间类型
			selectRoomType(type) {
				this.selectedRoomType = type;
				this.currentPage = 1;
				this.allRooms = [];
				this.noMoreData = false;
				this.fetchBindInfo();
			},
			// 选择房间
			selectRoom(room) {
				uni.showModal({
					title: '提示',
					content: `确定选择房间 ${room.SS_MC} 吗？`,
					success: (res) => {
						if (res.confirm) {
							uni.setStorageSync('selectedRoomInfo', room);
							uni.navigateTo({
								url: '/myDormitory/furniture/furniture',
							});
						}
					}
				});
			}
		},
	};
</script>

<style scoped>
	.container {
		display: flex;
		height: 100vh;
	}

	.menu {
		width: 200rpx;
		background-color: #f9f9f9;
		padding: 20rpx;
		position: fixed; /* 固定左侧菜单栏 */
		height: 100vh; /* 高度占满整个视口 */
		overflow-y: auto; /* 如果菜单内容过多，允许滚动 */
	}

	.menu-item {
		padding: 20rpx;
		text-align: center;
		margin-bottom: 10rpx;
		border-radius: 10rpx;
		cursor: pointer;
	}

	.menu-item.active {
		background-color: #2ba245;
		color: #fff;
	}

	.content {
		flex: 1;
		padding: 20rpx;
		margin-left: 240rpx; /* 留出左侧菜单栏的宽度 */
		height: 100vh; /* 高度占满整个视口 */
		overflow-y: auto; /* 允许右侧内容滚动 */
	}

	.room-config {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		text-align: center;
		color: #333;
	}

	.room-layout {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		text-align: left;
	}

	.swiper {
	    width: 100%;
	    height: 300rpx;
	    border-radius: 12rpx;
	    overflow: hidden;
	    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
	    margin-bottom: 20rpx;
	}
	
	.slide-image {
	    width: 100%;
	    height: 100%;
	}

	.item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		padding: 10rpx 0;
		border-bottom: 1rpx solid #e0e0e0;
	}

	.label {
		min-width: 120rpx;
		text-align: justify;
		text-align-last: justify;
		color: #555;
		font-weight: bold;
		font-size: 28rpx;
	}

	.value {
		margin-left: 20rpx;
		color: #666;
		flex: 1;
		font-size: 28rpx;
	}

	.room-list {
		height: 60vh; /* 占右侧内容区域的60% */
		overflow-y: auto; /* 允许房间列表滚动 */
	}

	.loading, .no-data, .no-more-data {
		text-align: center;
		padding: 20rpx;
		color: #666;
	}

	.room-item {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		border-bottom: 1rpx solid #ddd;
	}

	.room-name {
		font-size: 32rpx;
	}

	.room-price {
		font-size: 32rpx;
		color: #007AFF;
	}
</style>